<template>
  <div class="paper-container">
    <el-card v-if="isToPaperInfo === 1" style="margin-bottom: 50px">
      <el-row type="flex" justify="end">
        <el-button size="small" type="primary" plain @click="createFn">创建试卷</el-button>
      </el-row>
      <el-form
        :model="queryData"
        ref="form"
        :rules="formRules"
        label-width="80px"
        :inline="false"
        size="normal"
      >
        <el-row style="margin-top: 20px; height: 50px">
          <el-col :span="6">
            <el-form-item label="试卷名称">
              <el-input v-model="queryData.paper_name" placeholder="请输入试卷名称"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属学科">
              <el-select
                @change="changeHandler"
                v-model="queryData.subject_id"
                placeholder="请选择学科"
                clearable
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="归属目录">
              <el-select
                v-model="queryData.directory_id"
                placeholder="请选择目录"
                clearable
                ref="mulu"
                v-if="muluShow"
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷状态">
              <el-select v-model="queryData.show_state" placeholder="请选择试卷状态" clearable>
                <el-option label="启用" :value="1"></el-option>
                <el-option label="禁用" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="6">
            <el-form-item label="试卷难度">
              <el-select v-model="queryData.difficulty" placeholder="请选择难度" clearable>
                <el-option label="简单" :value="1"></el-option>
                <el-option label="中等" :value="2"></el-option>
                <el-option label="较难" :value="3"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="试卷类型">
              <el-select v-model="queryData.paper_type" placeholder="请选择试卷类型" clearable>
                <el-option label="模拟卷" :value="1"></el-option>
                <el-option label="真题卷" :value="2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建时间">
              <el-date-picker
                @change="change"
                style="width: 205px"
                v-model="time"
                type="daterange"
                range-separator="至"
                start-placeholder="开始"
                end-placeholder="结束"
                align="right"
              ></el-date-picker>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="创建人">
              <el-input v-model="queryData.create_name" placeholder="请输入创建人" style="width: 205px"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row type="flex" justify="end" style="margin-bottom: 20px">
        <el-col :span="3">
          <el-button size="small" type="primary" @click="btnOk">查询</el-button>
          <el-button size="small" @click="reset">重置</el-button>
        </el-col>
      </el-row>
      <el-table border :data="list">
        <el-table-column label="试卷名称" width="250px" prop="paper_name"></el-table-column>
        <el-table-column label="学科名称" width="140px" prop="subject_name"></el-table-column>
        <el-table-column label="目录名称" width="140px" prop="directory_name"></el-table-column>
        <el-table-column label="试卷类型" width="90px">
          <template slot-scope="{ row }">
            <span v-if="row.paper_type == 1">模拟卷</span>
            <span v-if="row.paper_type == 2">真题卷</span>
          </template>
        </el-table-column>
        <el-table-column label="试卷状态">
          <template slot-scope="{ row }">
            <el-switch
              @change="change_status(row)"
              :value="row.show_state"
              :active-value="1"
              :inactive-value="2"
            ></el-switch>
          </template>
        </el-table-column>
        <el-table-column label="分数情况" width="90px">
          <template slot-scope="{ row }">
            <span>{{ row.pass_score }}/{{ row.total_score }}</span>
          </template>
        </el-table-column>
        <el-table-column label="试卷难度" width="90px">
          <template slot-scope="{ row }">
            <span v-if="row.difficulty == 1">简单</span>
            <span v-if="row.difficulty == 2">中等</span>
            <span v-if="row.difficulty == 3">较难</span>
          </template>
        </el-table-column>
        <el-table-column label="创建人" width="100px" prop="create_name"></el-table-column>
        <el-table-column label="创建时间" width="100px">
          <template slot-scope="{row}">{{row.created_at | formatTime}}</template>
        </el-table-column>
        <el-table-column label="操作" width="100px">
          <template slot-scope="{ row }">
            <el-tooltip class="item" effect="dark" content="查看" placement="top">
              <el-button size="small" type="text" @click="toPaperInfo(row)" icon="el-icon-view"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="修改" placement="top">
              <el-button size="small" type="text" @click="editPaper(row)" icon="el-icon-edit"></el-button>
            </el-tooltip>
            <el-tooltip class="item" effect="dark" content="删除" placement="top">
              <el-button size="small" type="text" @click="delHandler(row.id)" icon="el-icon-delete"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页组件 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryData.page"
        :page-sizes="[3, 5, 10]"
        :page-size="queryData.limit"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
    <PaperInfo v-if="isToPaperInfo === 2" :PaperInfoVal="PaperInfoVal" @backPaper="backPaper" />
    <AddPaper ref="addPaper" v-if="isToPaperInfo === 3" @backPaper="backPaper" :cate="cate"></AddPaper>
  </div>
</template>

<script>
// 获取试卷列表
import {
  getPaperListApi,
  getSubjectListApi,
  changePaperStateApi,
  delPaperApi,
} from '@/api/paper'
// 引入试卷详情组件
import PaperInfo from './components/PaperInfo.vue'
import AddPaper from './components/AddPaper.vue'
export default {
  name: 'Paper',
  components: {
    PaperInfo,
    AddPaper,
  },
  data() {
    return {
      list: [],
      // 归属学科列表
      treeList: [],
      directoryList: [], //归属目录列表
      // 创建时间
      time: [],
      queryData: {
        page: 1,
        limit: 10,
        subject_id: '',
        directory_id: '',
        paper_name: '',
        difficulty: '',
        show_state: '',
        paper_type: '',
        create_name: '',
        create_time: '',
      },
      total: 0,
      formData: {},
      formRules: {},
      // 是否去试卷详情页
      isToPaperInfo: 1,
      PaperInfoVal: '',
      cate: 1, //用于判断是新增还是修改
      muluShow: true,
    }
  },
  created() {
    this.initData()
  },
  methods: {
    async initData() {
      let { list, total } = await getPaperListApi(this.queryData)
      // 归属学科
      this.treeList = await getSubjectListApi()
      this.list = list
      this.total = total
    },
    // 分页逻辑
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.queryData.limit = val
      this.initData()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.queryData.page = val
      this.initData()
    },
    // 日期选择器
    change() {
      if (this.time) {
        this.time[0] = +new Date(this.time[0])
        this.time[1] = +new Date(this.time[1])
        this.queryData.create_time = this.time.join(',')
      } else {
        this.queryData.create_time = ''
      }
    },
    // 查询事件
    btnOk() {
      // console.log(9999)
      this.initData()
    },
    // 重置事件
    reset() {
      this.queryData = {}
      this.initData()
    },
    // 试卷状态切换
    async change_status(row) {
      // console.log(id, state)
      // await changePaperStateApi(id, state)
      let state = row.show_state === 1 ? 2 : 1
      try {
        await changePaperStateApi(row.id, state)
      } catch (error) {
        return console.log(error)
      }
      this.initData()
    },
    // 删除试卷
    async delHandler(id) {
      await this.$confirm('确认删除吗？')
      // console.log(id)
      await delPaperApi(id)
      this.$message.success('删除成功')
      this.initData()
    },
    // 跳转到试卷信息传参
    toPaperInfo(val) {
      // console.log(val)
      this.PaperInfoVal = val
      this.isToPaperInfo = 2
    },
    // 点击修改跳到修改页面
    async editPaper(val) {
      // 给json对象转成数组
      val.check_question_list = JSON.parse(val.check_question_list)
      val.quest_type = JSON.parse(val.quest_type)
      val.quest_type = val.quest_type.join(',').split(',')

      this.cate = 2
      this.isToPaperInfo = 3
      await this.$nextTick()
      this.$refs.addPaper.formData = val
    },
    //归属目录
    changeHandler(val) {
      console.log(val)
      if (val === '') {
        this.directoryList = []
      }
      this.treeList.forEach((item) => {
        if (item.id === val) {
          this.directoryList = item.children
        }
      })
    },
    backPaper() {
      this.isToPaperInfo = 1
      this.initData()
    },
    createFn() {
      this.cate = 1
      this.isToPaperInfo = 3
    },
  },
}
</script>

<style lang="scss" scoped>
.paper-container {
  background-color: #eaedf1;
  padding: 20px;
}
</style>
